<template xmlns:v-lazy="http://www.w3.org/1999/xhtml">
  <div class="me w-page">
    <w-nav-bar
      title="我"
      :back="false"
      :more-home="false"/>
    <div v-if="meData">
      <!--头像-->
      <div class="home">
        <div
          v-lazy:background-image="meData.mMeHomeIconUrl"
          @click.self="headPortraitClick"
          class="w-image-fit icon radius">
          <a
            :href="meData.home_jianli"
            class="jianli w-round w-flex-center">
            <down-icon
              width="24"
              height="24"
              fill="#fff"/>
          </a>
        </div>
        <h1 class="title">{{ meData.home_title }}</h1>
      </div>

      <!--关于我-->
      <div class="about-me me-cell">
        <h3 class="me-cell-title">关于我</h3>
        <p
          class="me-cell-detail"
          v-for="(v, k) in meData.aboutArr"
          :key="k">{{ v }}</p>
      </div>

      <!--作品-->
      <div class="zuopin-me me-cell">
        <h3 class="me-cell-title">
          作品
          <router-link
            class="all-icon"
            :to="{name: 'MeProductionTypeList'}">
            <section-item-icon class="list-icon"/>
          </router-link>
        </h3>
        <div class="contents-bg">
          <router-link
            :to="{name: 'MeProductionDetail', query: {id: v._id }}"
            v-for="(v, k) in productionps"
            :key="k">
            <div
              v-lazy:background-image="v.mMeCover || defaultImage"
              class="item w-image-fit"/>
          </router-link>
        </div>
      </div>

      <!--专业技能-->
      <div class="jineng-me me-cell">
        <h3 class="me-cell-title">专业技能</h3>
        <p
          class="me-cell-detail"
          v-for="(v, k) in meData.expertiseArr"
          :key="k">{{ v }}</p>
        <!--图表-->
        <skills-chart
          @barClick="jinNengItemClick"
          ref="skills-chart"/>
      </div>

      <!--工作经验-->
      <div class="jingyan-me me-cell">
        <h3 class="me-cell-title">
          学习总结
          <router-link
            class="all-icon"
            :to="{name: 'SummarizeRoot'}">
            <section-item-icon class="list-icon"/>
          </router-link>
        </h3>
        <p
          class="me-cell-detail"
          v-for="(v, k) in meData.experience_showArr"
          :key="k">{{ v }}</p>
        <div class="contents-bg">
          <div
            @click="studyItemClick(v)"
            v-for="(v, k) in studyArr"
            :key="k"
            v-lazy:background-image="v.mMePic || defaultImage"
            class="item w-image-fit"/>
        </div>
      </div>

      <!--工作经历-->
      <div class="works-me me-cell">
        <h3 class="me-cell-title">工作经历</h3>
        <p
          class="me-cell-detail"
          v-for="(v, k) in meData.works_showArr"
          :key="k">{{ v }}</p>
        <div class="contents-bg">
          <div
            @click.self="workItemClick(v)"
            v-for="(v, k) in meData.works"
            :key="k"
            v-lazy:background-image="v.mMeIcon"
            class="item w-image-fit">
            <info-icon
              class="icon w-round"
              @click.stop="workIconClick(v)"/>
          </div>
        </div>
      </div>
    </div>
    <popup
      class="work-pop"
      v-model="workPopIsShow"
      :popup-style="{zIndex: 2000}"
      position="top">
      <div
        class="content"
        v-if="currentWork">
        <h2 class="title">{{ currentWork.name }}</h2>
        <p class="time">{{ currentWork.strtAndEndTime }}</p>
        <p class="obligation">{{ currentWork.obligation }}</p>
        <p class="detail">{{ currentWork.detail }}</p>
      </div>
    </popup>
    <w-viewer ref="WViewer"/>
  </div>
</template>

<script>
import MeModel from '@/models/web/MeModel'
import ProductModel from '@/models/web/ProductModel'
import StudyModel from '@/models/web/StudyModel'
import WViewer from '@/components/global/viewer/index'
import SkillsChart from './skillsChart'
import Config from '@/config/index'
import { Popup } from 'vux'
import API from '@/api/apis'
import DownIcon from '@/icons/down.svg'
import SectionItemIcon from '@/icons/section-item.svg'
import InfoIcon from '@/icons/info.svg'
export default {
  name: 'MeRoot',
  data () {
    return {
      /**
       * 我的数据
       */
      meData: new MeModel(),
      /**
       * 作品
       */
      productionps: [],
      /**
       * 学习数组
       */
      studyArr: [],
      /**
       * 工作弹窗是否显示
       */
      workPopIsShow: false,
      /**
       * 当前工作
       */
      currentWork: null,
      /**
       * 默认图片
       */
      defaultImage: Config.defaultImage
    }
  },
  components: {
    SkillsChart,
    WViewer,
    Popup,
    DownIcon,
    SectionItemIcon,
    InfoIcon
  },
  methods: {
    /**
     * 获取所有的数据
     */
    getMeData () {
      const allPromise = Promise.all([
        this.meData.getModel(true),
        ProductModel.loadAllModels(API.production.meData, true),
        StudyModel.loadAllModels(API.study.meData, true)
      ])
      allPromise.w_then_finally((arr) => {
        this.$nextTick(() => {
          this.$refs['skills-chart'].setData(arr[0])
        })
        this.productionps = arr[1]
        this.studyArr = arr[2]
      })
    },
    /**
     * 技能cell点击
     * @param type
     */
    jinNengItemClick (type) {
      this.$router.push({path: `/me/jineng-detail/${type}`})
    },
    /**
     * 学习item点击
     * @param v 学习模型
     */
    studyItemClick (v) {
      this.$router.push({name: 'SummarizeStudyDetail', query: { id: v._id }})
    },
    /**
     * 工作右上角按钮点击
     * @param v
     */
    workIconClick (v) {
      this.workPopIsShow = true
      this.currentWork = v
    },
    /**
     * 工作item点击
     * @param v 工作模型
     */
    workItemClick (v) {
      window.location.href = v.url
    },
    /**
     * 头像点击
     */
    headPortraitClick() {
      this.$refs['WViewer'].show(this.meData.home_icon)
    }
  },
  mounted () {
    this.getMeData()
  }
}
</script>

<style lang="scss" scoped>
  .me {
    .contents-bg {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      padding: 0 10px;
      .item {
        position: relative;
        width: 170px;
        height: 170px;
        border-radius: 5px;
        margin-bottom: 10px;
        .icon {
          position: absolute;
          right: 0;
          top: 0;
          width: 30px;
          height: 30px;
          padding: 5px;
          background-color: rgba(3,3,3,.5);
          fill: #fff;
          font-size: 30px;
          color: #eee;
        }
      }
    }
    .home {
      padding-top: 20px;
      >.icon {
        margin: 0 auto;
        width: 200px;
        height: 200px;
        position: relative;
        >.jianli {
          position: absolute;
          right: 0;
          bottom: 0;
          background-color: #99a9bf;
          width: 30px;
          height: 30px;
          color: #fff;
        }
      }
      >.title {
        padding: 0 10px;
        color: #999;
        font-size: 18px;
        line-height: 26px;
        text-align: center;
      }
    }
    .me-cell {
      position: relative;
      border-top: 1px solid rgba(247, 120, 111, .3);
      >.me-cell-title {
        color: #28384c;
        font-size: 20px;
        text-align: center;
      }
      >.me-cell-detail {
        color: #666;
        margin: 10px 0;
        font-size: 16px;
        text-align: center;
        padding: 0 10px;
        line-height: 20px;
      }
      .all-icon {
        position: absolute;
        right: 10px;
        top: 10px;
        color: #999;
        .list-icon {
          padding: 5px;
          width: 40px;
          height: 40px;
          fill: #666;
        }
      }
    }
    .zuopin-me {
    }
    .jineng-me {
    }
    .jingyan-me {
    }
    .work-pop {
      >.content {
        text-align: center;
        padding: 10px;
        >.title {
          font-size: 20px;
        }
        >.time {
          font-size: 16px;
          color: #999;
        }
        >.obligation {
          font-size: 16px;
          color: #999;
        }
        >.detail {
          font-size: 16px;
          color: #333;
          line-height: 20px;
        }
      }
    }
  }
</style>
